<template>
  <div class="body">
    <header class="header">
      <dv-decoration-11 class="header-text">
        <span class="header-text-z">数据可视化大屏-</span>
        <span class="header-text-n">
          <countTo :startVal='0' :endVal="1024" :duration='10000' :separator="''" ref="CountToPower"></countTo >
        </span>
        <span class="header-text-n">-LiuXin</span>
      </dv-decoration-11>
    </header>
    <main class="main">
      <section class="left">
        <div class="left-item-top">
          <dv-loading class="loding-text" v-if="show1"
            >正在加载水球图...</dv-loading
          >
          <dv-border-box-7 v-else><waterBall></waterBall></dv-border-box-7>
        </div>
        <div class="left-item-middle">
          <dv-loading class="loding-text" v-if="show2"
            >正在加载3D饼图...</dv-loading
          >
          <dv-border-box-7 v-else><sqaueLeft></sqaueLeft></dv-border-box-7>
        </div>
        <div class="left-item-bottom">
          <dv-loading class="loding-text" v-if="show3"
            >正在加载词云图...</dv-loading
          >
          <dv-border-box-7 v-else>
            <lineChart></lineChart>
          </dv-border-box-7>
        </div>
      </section>
      <section class="middle">
        <div class="middle-top">
          <dv-loading class="loding-text" v-if="show4"
            >正在加载中国地图...</dv-loading
          >
          <dv-border-box-7 v-else>
            <myMap></myMap>
          </dv-border-box-7>
        </div>
        <div class="middle-bottom">
          <dv-loading class="loding-text" v-if="show5"
            >正在加载树状折线图...</dv-loading
          >
          <dv-border-box-7 v-else>
            <lineBottom></lineBottom>
          </dv-border-box-7>
        </div>
      </section>
      <section class="right">
        <div class="right-item-top">
          <dv-loading class="loding-text" v-if="show6"
            >正在加载数据中心图...</dv-loading
          >
          <dv-border-box-7 v-else>
            <centerSql></centerSql>
          </dv-border-box-7>
        </div>
        <div class="right-item-middle">
          <dv-loading class="loding-text" v-if="show7"
            >正在加载雷达图...</dv-loading
          >
          <dv-border-box-7 v-else>
            <leiDa></leiDa>
          </dv-border-box-7>
        </div>
        <div class="right-item-bottom">
          <dv-loading class="loding-text" v-if="show8"
            >正在加载浙江3D地图...</dv-loading
          >
          <dv-border-box-7 v-else>
            <dv-decoration-12> <chinaMap3d></chinaMap3d></dv-decoration-12>
          </dv-border-box-7>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
import myMap from "../components/echarts/myMap/myMap.vue"
import waterBall from "../components/echarts/waterBall/waterBall.vue"
import sqaueLeft from "../components/echarts/sqaueLeft/sqaueLeft.vue"
import lineChart from "../components/echarts/lineCharts/lineCharts.vue"
import lineBottom from "../components/echarts/lineBottom/lineBottom.vue"
import centerSql from "../components/echarts/centerSql/centerSql.vue"
import leiDa from "../components/echarts/leiDa/leiDa.vue"
import chinaMap3d from "../components/echarts/chinaMap3d/chinaMap3d.vue"
import countTo from 'vue-count-to';
export default {
  name: "dashboardChart",
  components: {
    myMap,
    waterBall,
    sqaueLeft,
    lineChart,
    lineBottom,
    centerSql,
    leiDa,
    chinaMap3d,
    countTo
  },
  data() {
    return {
      show1: true,
      show2: true,
      show3: true,
      show4: true,
      show5: true,
      show6: true,
      show7: true,
      show8: true,
    }
  },
  mounted() {
    setTimeout(() => {
      this.show1 = false
    }, 1000)
    setTimeout(() => {
      this.show2 = false
    }, 1500)
    setTimeout(() => {
      this.show3 = false
    }, 2000)
    setTimeout(() => {
      this.show4 = false
    }, 2500)
    setTimeout(() => {
      this.show5 = false
    }, 3000)
    setTimeout(() => {
      this.show6 = false
    }, 3500)
    setTimeout(() => {
      this.show7 = false
    }, 4000)
    setTimeout(() => {
      this.show8 = false
    }, 4500)
  },
  methods: {},
  destroyed() {},
}
</script>
<style lang="scss" scoped>
.body {
  width: 100vw;
  height: calc(100vh);
  .main {
    width: 100%;
    height: 100%;
    display: flex;
  }
  // background: url(../assets/bg.png) ;
  background-color: rgba(0, 0, 0, 0.8);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  .left {
    width: vw(460);
    height: calc(100vh - vh(60));
    padding: vh(5);
    display: flex;
    flex-direction: column;
    .left-item-top,
    .left-item-middle,
    .left-item-bottom {
      box-sizing: border-box;
      width: 100%;
      margin: vh(8) 0px;
      flex: 1;
      // background-color: yellow;
    }
  }
  .middle {
    width: vw(1000);
    height: 100vh;
    padding: vh(5);
    .middle-top,
    .middle-bottom {
      margin: vh(8) 0px;
    }
    .middle-top {
      height: vh(720);
    }
    .middle-bottom {
      height: vh(270);
      // background-color: rgb(32, 128, 212);
    }
  }
  .right {
    width: vw(460);
    height: calc(100vh - vh(60));
    padding: vh(5);
    display: flex;
    flex-direction: column;
    .right-item-top,
    .right-item-middle,
    .right-item-bottom {
      width: 100%;
      margin: vh(8) 0px;
      flex: 1;
      // background-color: yellow;
    }
  }
}
.loding-text {
  color: white;
  font-size: vw(16);
}
.header {
  height: vh(60);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  .header-text{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header-text-n {
    padding: vw(3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: vw(30);
    font-family: "myFont";
    color: #25c7ee;
  }
  .header-text-z {
    padding: vw(3);
    color: #25c7ee;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: vw(22);
    font-family: "myFont";
}
}
</style>

